First Steps

Welcome to the First Steps guide on getting started with Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET Core!

This guide creates a use case scenario which demonstrates how to start working with the suite and implement the Kendo UI DatePicker for ASP.NET Core in your project either with the HtmlHelper or with the TagHelper.

This article shows each step on Windows with Visual Studio 2019.

For using Telerik UI for ASP.NET Core on MacOS, refer to [Getting Started with CLI]({% slug gettingstartedcli_aspnetmvc6_aspnetmvc %}).

Prerequisites

The prerequisites for creating and running an ASP.NET Core on Windows with VS 2019 are described on the .NET Core documentation site.

Configuration

To configure an ASP.NET Core Web Application to use Telerik UI for ASP.NET Core you can either start from scratch and add everything necessary manually or use the The Progress® Telerik® UI for ASP.NET Core Visual Studio Extensions and create a Telerik ASP.NET Core MVC Application that has all the scripts, styles and editor templates

Start from scratch ASP.NET Core Web Application.
Create a sample project with everything in it [Telerik ASP.NET Core MVC Application]({% slug overview_visualstudio_aspnetcore %}).

Create ASP.NET Core Project

Open Visual Studio 2019 and select > Create a New Project.
Select > ASP.NET Core Web Application and click > Next.

Figure 1. Create an ASP.NET Core MVC application
Set a name and location for the project and click Create.

Figure 2. Select location
Select Web Application (Model-View-Controller) and click Create.

Figure 3. Select a Web Application

Add the Telerik UI for ASP.NET Core NuGet Package

Open the NuGet Package Manager.

Figure 4. The NuGet Package Manager
Add a new package source.

Figure 5. Add the Telerik NuGet Source
```
https://nuget.telerik.com/nuget
```
Select the Telerik Source from the package source drop-down list and add your credentials as prompted.

Figure 6. Authenticate using your telerik.com email and password
Click the Browse tab and search for Telerik.UI.for.AspNet.Core.

Figure 7. Select the package and install it
- This should add a line to your .csproj file similar to the following example.
```
  <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="{{ site.mvcCoreVersion }}" />
```

Open Startup.cs file and register the Kendo services in the ConfigureServices method.

    public void ConfigureServices(IServiceCollection services)
    {
        // Add Kendo UI services to the services container
        services.AddKendo();
    }

Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml through @using Kendo.Mvc.UI.
If you intend to use the Kendo UI ASP.NET Core TagHelpers, add them with @addTagHelper *, Kendo.Mvc as well.

     @using MyASPNETCoreProject
     @using MyASPNETCoreProject.Models
     @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
     @addTagHelper *, Kendo.Mvc
     @using Kendo.Mvc.UI

Include the client-side resources.

The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.

Go to ~\Views\Shared\_Layout.cshtml and add the theme of your choice in the <head> of the document. Since the Microsoft project uses Bootstrap, we can use the Kendo UI SASS Bootstrap v4 theme to match it:
<link rel=“stylesheet” href="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/styles/kendo.bootstrap-v4.min.css" />
The Microsoft template comes with a jQuery script reference in the body. Find it and move it to the head

The Kendo UI scripts must be placed after jQuery.

    <script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.all.min.js"></script>   
    <script src="https://kendo.cdn.telerik.com/{{ site.mvcCoreVersion }}/js/kendo.aspnetmvc.min.js"></script>

Use a Kendo UI widget by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

    <div class="text-center">
        <h2>Kendo UI DatePicker</h2>
        @(Html.Kendo().DatePicker()
            .Name("datepicker")
        )
    </div>

    <kendo-datepicker name="my-picker"/>

Now that all is done, you can see the sample page.

Figure 8. The end result—a sample page